<template>
<div :class="$style.mychar">

    <v-chart :class="$style.char"  :options="polar"/>

    <div :class="$style.chosemonthdiv">
        
  </div>
  
      <el-row>
      <el-col :span="7"><p>{{ this.value4 }} 月每日订单数</p></el-col>
      <el-col :span="12">
        <span>选择查询月份</span>
        <el-date-picker
              v-model="value4"
              type="month"
              @change="getSTime"
              value-format="yyyy-M"
              placeholder="选择月">
            </el-date-picker>
      </el-col>
    </el-row>
    <v-chart :class="$style.char"  :options="polar_order"/>
</div>
</template>

<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/bar";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/geo";
import "echarts/lib/component/legend";
import "echarts/lib/component/polar";
import "echarts/theme/macarons";
import { reqwebjob, reqmonthorders } from "@/api";

export default {
  components: {
    "v-chart": ECharts
  },
  data: function() {
    let data = [];
    for (let i = 0; i <= 360; i++) {
      let t = (i / 180) * Math.PI;
      let r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
    }

    return {
      value4: new Date(),
      polar: {
        title: {
          text: "订单任务列表"
        },
        tooltip: {},
        legend: {
          data: ["任务数", "销售票"]
        },
        xAxis: {
          data: []
        },
        yAxis: {},

        series: [
          {
            name: "任务数",
            type: "bar",
            data: [],
            itemStyle: {
              color: "#359e4d"
            },
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "销售票",
            type: "bar",
            data: [],
            itemStyle: {
              color: "#c23531"
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ],
        itemStyle: {
          color: "#18a7d0"
        },
        animationDuration: 2000
      },
      polar_order: {
        title: {
          text: ""
        },
        tooltip: {},
        legend: {
          data: ["明细数"]
        },
        xAxis: {
          data: []
        },
        yAxis: {},

        series: [
          {
            name: "明细数",
            type: "line",
            data: [],
            itemStyle: {
              color: "#359e4d"
            },
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ],
        itemStyle: {
          color: "#18a7d0"
        },
        animationDuration: 2000
      }
    };
  },
  beforeCreate() {
    console.log("创建前");
  },
  created() {
    this.getjob();
  },
  
  methods: {
    
    getSTime: async function (val){
      this.$message(this.value4)
      console.log(this.value4.split("-")[0])
      const  ret_order = await reqmonthorders({reqyear: this.value4.split("-")[0],reqmonth: this.value4.split("-")[1]});
       if (ret_order.status == "True") {
        this.polar_order.xAxis.data = ret_order.colname;
        this.polar_order.series[0].data = ret_order.coldata;
      } else {
        this.$message("查询出现错误");
      }
    },
    getjob: async function() {
      const ret = await reqwebjob();
      console.log(this.value4)
      const ret_order = await reqmonthorders({reqyear: this.value4.getFullYear(),reqmonth: this.value4.getMonth()+1});
      if (ret.status == "True") {
        console.log(ret.data);
        this.polar.xAxis.data = ret.colname;
        this.polar.series[0].data = ret.coldata;
        this.polar.series[1].data = ret.datainv;
      }
      if (ret_order.status == "True") {
        this.polar_order.xAxis.data = ret_order.colname;
        this.polar_order.series[0].data = ret_order.coldata;
        this.value4 = this.value4.getFullYear() +'-'+String(Number(this.value4.getMonth())+1)
      } else {
        this.$message("查询出现错误");
      }
    }
  }
};
</script>

<style lang="scss" module>
.mychar {
  margin: 10px 20px 5px;
  .chosemonthdiv {
    float: right;
  }
  .char {
    width: 80%;
    display: flex;
    box-shadow: 0px 0px 20px rgba(238, 235, 235, 0.2);
    margin: 10px 0px;
    border-radius: 4px;
    cursor: pointer;
    transform: scale(1, 1);
    transition: all 0.1s ease-in-out;
  }
}
</style>
